<template>
	<view>
		<view>
			<u-search v-model="title" @change="searchTopic" :clearabled="true" style="width:370px;padding: 10px;margin:0 auto" @custom='searchClick' :showAction="true" actionText="取消"></u-search>
			<view>
				<div @click="releaseTopic(item)" v-for="(item, index) in topicList" :key="index" style="margin-left:5%;margin-top:20px">
					{{item.topicName}}
				</div>
			</view>
		</view>
		<view v-show="searchls" >
			<div style="margin-left:5%;margin-top:25px;font-weight: bold;">历史记录</div>
			<div v-for="(item1, index11) in historyRecordList" :key="index11" style="margin-top:10px;width:100%">
				<div @click="historyRecordNameList(item1.historyRecordName)" class="span_2" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:70px;margin-left:5%;float:left;text-align: center;">
				{{item1.historyRecordName}}</div>
			</div>
			<div style="clear:both"></div>
			<div style="margin-left:5%;margin-top:35px;font-weight: bold;width:100%;">热门搜索</div>
			<div @click="historyRecordNameList(item2.historyRecordName)" v-for="(item2, index2s) in historyRecordListNum" :key="item2.historyRecordId" style="margin-top:10px">
				<div class="span_2" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:70px;margin-left:5%;float:left;text-align: center;">
				{{item2.historyRecordName}}</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索值
				title: '',
				// 搜索列表
				topicList: [],
				// 显示历史
				searchls: true,
				// 历史新增集合
				historyList:{
					historyRecordName: '',
					historyUserId:0
				},
				// 查询历史
				historyRecordList: [],
				// 热门搜索
				historyRecordListNum: []
			}
		},
		onLoad(option) {
			// 查询历史记录
			this.getHistoryRecordList()
			// 查询热门搜索
			this.getHistoryRecordListNum()
		},
		methods: {
			historyRecordNameList (historyRecordName) {
				uni.navigateTo({
					  url: '../index/searchResults?historyRecordName='+historyRecordName,
				})
			},
			// 查询热门搜索
			getHistoryRecordListNum(){
				uni.request({
					url: "http://localhost:8090/contents/getHistoryRecordListNum",                
					method: 'get',
					dataType: 'json',
					success: (res) => {
						this.historyRecordListNum = res.data.object
					},                  
				});
			},
			// 查询历史记录
			getHistoryRecordList(){
				var userId = uni.getStorageSync('administrator').userId
				uni.request({
					url: "http://localhost:8090/contents/getHistoryRecordList?id="+ userId,                
					method: 'get',
					dataType: 'json',
					success: (res) => {
						this.historyRecordList = res.data.object
					},                  
				});
			},
			// 新增历史记录
			releaseTopic (item) {
				var userId = uni.getStorageSync('administrator').userId
				this.historyList.historyRecordName=item.topicName
				this.historyList.historyUserId=userId
				this.$axios({
					url: '/contents/saveHistoryRecord',
					method: 'post',
					data: JSON.stringify(this.historyList),
					success: (res) => {
						if (res.data.code === 200) {
							uni.navigateTo({
								  url: '../index/searchResults?historyRecordName='+this.historyList.historyRecordName
							})
						}
					}
				})
			},
			// 取消返回首页
			searchClick () {
				uni.switchTab({
					url: '../index/index'
				})
			},
			// 搜索查询
			searchTopic () {
				this.searchls = false
				if(this.title != null && this.title != ''){
					this.$axios({
						url: '/contents/getHistoryRecordTopic?title=' + this.title,
						method: 'get',
						success: (res) => {
							if (res.data.code === 200) {
								this.topicList = res.data.object
							}
						}
					})
				}else{
					this.topicList = ""
				}
			}
		}
	}
</script>

<style>
.span_2{
		height: 30px;
		border-radius: 20px 20px 20px;
		line-height: 220%;
		background-color: #F2F2F2;
		font-size: 13px;
		margin-top:10px
	}
</style>
